<template>
  <div class="myPages u-text-center">
    <h3 style="margin: 50px auto">关于我们</h3>
    <div class="itemContent" v-if="aboutDic.aboutTitle">
      <el-row>
        <el-col :span="3"></el-col>
        <el-col :span="10">
          <div class="" style="margin-top: 20px">
            <div class="" style="font-weight: bold">
              <!-- {{ aboutDic.aboutTitle }} -->
              环海锦润
            </div>
            <div class="" style="margin-top: 30px">
              {{ aboutDic.aboutDescribe }}
            </div>
          </div>
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="6">
          <div class="u-flex" style="align-items: start; height: 300px">
            <div>
              <img
                :src="aboutDic.pictureOne"
                style="width: 200px; height: 300px"
              />
            </div>
            <div
              class="u-flex-col u-row-between"
              style="height: 305px; margin-left: 10px"
            >
              <div>
                <img
                  :src="aboutDic.pictureTow"
                  style="width: 200px; height: 140px"
                />
              </div>
              <div>
                <img
                  :src="aboutDic.pictureThree"
                  style="width: 200px; height: 140px"
                />
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="3"> </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import homeApi from "@/api/home";
const aboutDic = reactive({});
onMounted(() => {
  homeApi.getAbout({}).then((res) => {
    // console.log(res);
    Object.assign(aboutDic, res.data);
  });
});
</script>
<style scoped></style>
